<template>
  <div class="detail">
      <!-- 顶部EXIT 标题 分享栏 -->
      <van-nav-bar :title="detailData.proname" left-arrow @click-left="returnIndex">
        <!-- 分享 -->
        <template #right>
          <van-popover
            theme="dark"
            trigger="click"
            :actions="actions"
            @select="onMoreSelect"
            v-model="showPopover"
            placement="bottom-end"
            :offset="[13,8]"
          >
            <template #reference>
              <van-icon name="weapp-nav"></van-icon>
            </template>
          </van-popover>
          <!-- <van-icon name="more" size="25" /> -->
        </template>
      </van-nav-bar>
        <!-- 弹出层 -->
        <div class="detailImg">
            <!-- swiper -->
            <van-swipe class="my-swipe" indicator-color="white">
                <van-swipe-item v-for="(item,index) in bannerList" :key="index">
                    <img :src="item" @click="imgClick(index)"/>
                </van-swipe-item>
            </van-swipe>
            <!-- 视频 -->
            <div class="vdo" @click="show = true">1'20</div>
            <van-popup v-model="show">
                <video id="vdo" autoplay width="375" controls src="https://jvod.300hu.com/vod/product/2c734922-a63d-4c92-b965-0d70d4d65f6b/75f44d6c9d4d4673ab586585d26ca771.mp4"></video>
            </van-popup>
        </div>
    <!-- 商品信息 -->
    <div class="bottom">
      <div class="price">￥{{detailData.originprice}}</div>
      <!-- 分类按钮 -->
      <van-tag type="danger">{{detailData.brand}}</van-tag>
      <van-tag type="primary">{{detailData.category}}</van-tag>
      <div class="title">{{detailData.proname}}</div>
      <div class="span">{{detailData.desc}}</div>
    </div>
    <!-- 加入购物车栏 有货 -->
    <van-goods-action v-if="sellOut">
        <van-goods-action-icon icon="chat-o" text="客服" dot />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="goCart" badge="5" />
        <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
        <van-goods-action-button type="warning" text="加入购物车" @click="addCartFn"/>
        <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- 加入购物车栏 无货 -->
    <van-goods-action v-if="!sellOut">
      <van-goods-action-icon icon="chat-o" text="客服" @click="1" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="goCart" />
      <van-goods-action-icon icon="shop-o" text="店铺" @click="1" />
      <van-goods-action-button
        type="danger"
        text="商品已下架"
        color="rgba(255,0,0,.5)"
        @click="11"
      />
    </van-goods-action>
    <!-- 弹出分享栏 -->
    <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
        />
  </div>
</template>

<script>
import Vue from 'vue'
import {
  Tag,
  Icon,
  Toast,
  Swipe,
  Popup,
  NavBar,
  Popover,
  SwipeItem,
  ShareSheet,
  GoodsAction,
  ImagePreview,
  GoodsActionIcon,
  GoodsActionButton
} from 'vant'
import { getDetailData } from '@/api/home.js'
import { addCart } from '@/api/cart.js'

Vue.use(Tag)
Vue.use(Icon)
Vue.use(Swipe)
Vue.use(Popup)
Vue.use(NavBar)
Vue.use(Popover)
Vue.use(SwipeItem)
Vue.use(ShareSheet)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)

export default {
  data () {
    return {
      proid: '',
      show: false,
      detailData: [],
      bannerList: [],
      imgShow: false,
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [
        { index: 1, text: '首页', icon: 'wap-home-o' },
        { index: 2, text: '分类', icon: 'bars' },
        { index: 3, text: '购物车', icon: 'bag-o' },
        { index: 4, text: '我的', icon: 'friends-o' },
        { index: 5, text: '分享', icon: 'share' }
      ],
      sellOut: true
    }
  },
  async mounted () {
    this.proid = location.href.split('detail/')[1]
    console.log(this.proid)
    this.detailData = await getDetailData(this.proid)
    console.log(this.detailData)
    this.bannerList = this.detailData.banners[0].split(',')
    this.sellOut = this.detailData.issale
  },
  methods: {
    returnIndex () {
      this.$router.back()
    },
    showPopup () {
      this.show = true
    },
    onChange (index) {
      this.index = index
    },
    onSelect (option) {
      Toast(option.name)
      this.showShare = false
    },
    onMoreSelect (actions) { // 分享栏的跳转
      switch (actions.index) {
        case 1:
          this.$router.push('/home')
          break
        case 2:
          this.$router.push('/kind')
          break
        case 3:
          this.$router.push('/cart')
          break
        case 4:
          this.$router.push('/user')
          break
        case 5:
          this.showShare = true
      }
    },
    // swipe点击图片展示
    imgClick (index) {
      ImagePreview({
        images: this.bannerList,
        startPosition: index
      })
    },
    goCart () {
      if (!localStorage.getItem('token')) this.$router.push('/login')
      this.$router.push('/cart')
    },
    async addCartFn () { // 添加购物车
      var params = {
        userid: localStorage.getItem('userid'),
        proid: this.proid,
        num: 1
      }
      var res = await addCart(params)
      if (res.code === '200') Toast('添加购物车成功')
    }
  }
}
</script>

<style lang="stylus" scoped>
.detail
  height 100%
  background-color #eeeeee
  .detailImg
    width 100%
    position relative
    .my-swipe
      height 19rem
      overflow hidden
    .vdo,.vdo[data-v-759133e5]
      position: absolute;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 30px;
      background: url("") no-repeat;
      background-size: contain;
      display: flex;
      justify-content: center;
      align-items: center;
    img
      width 100%
  .bottom
    height 9rem
    padding .5rem
    margin .35rem .25rem
    border-radius .2rem
    background-color white
    .price
      color #f2270c
      font-weight 700
      font-size 1rem
      line-height 1.5rem
    .title
      padding .25rem
      line-height 1rem
      font-weight 700
    .span
      font-size .4rem
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical
</style>
